<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生账户管理</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">学生账户列表</b>
    <!--    <div style="float: right;">-->
    <!--        <el-button type="primary" @click="showAddStudent">添加学生账户</el-button>-->
    <!--    </div>-->
    <div>
        <el-select v-model="faculty.facultyName" placeholder="请选择学院" @change="facultyChange">
            <el-option
                    v-for="item in faculty"
                    :key="item.facultyId"
                    :label="item.facultyName"
                    :value="item.facultyId">
            </el-option>
        </el-select>
        <el-select v-model="classes.className" placeholder="请选择班级" @change="classesChange">
            <el-option

                    v-for="item in classes"
                    :key="item.classId"
                    :label="item.className"
                    :value="item.classId">
            </el-option>
        </el-select>
    </div>
    <!--
        :data="tableData" 关联vue中的data中的tableData，后台将数据赋值给tableData，然后显示到这里
    -->
    <el-table :data="tableData">
        <el-table-column align="center" type=index label="序号" prop="user.userId" width="100px"></el-table-column>
        <el-table-column align="center" prop="user.userNumber" label="用户名"></el-table-column>
        <el-table-column align="center" prop="classes.className" label="班级"></el-table-column>
        <el-table-column align="center" prop="name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="sex" label="性别"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="props">
                <el-button type="primary" @click="resetPass(props.row)">重置密码</el-button>
                <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
    <!--
       1.:visible.sync="dialogTableVisible4add"  控制弹出框是否显示的 (true显示,false隐藏)
       2.dialogTableVisible4add来自于下面的vue,默认值是false，通过showAddStu函数来修改dialogTableVisible4add的值
   -->
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            tableData: [],//表格数据
            faculty: [],
            classes: [],
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            otherInfo: {
                facultyId: 1,
                classId: 0
            },
        },
        methods: {
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            //改变学院时
            facultyChange(facultyId) {
                this.otherInfo.facultyId = facultyId;
                this.selectClasses();
                this.selectByPage();
            },
            classesChange(classesId) {
                this.otherInfo.classId = classesId;
                this.selectByPage();
            },
            //重新查找学院之下所有的班级
            selectClasses() {
                let param = "action=showClasses&facultyId=" + this.otherInfo.facultyId;
                console.log(param);
                axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet", param)
                    .then(res => {
                        console.log(res.data);
                        this.classes = res.data
                    });
            },
            //分页查询功能
            selectByPage() {
                //向后台发送请求
                let param = "action=showStudentUser&curPage=" + this.pagination.currentPage +
                    "&pageSize=" + this.pagination.pageSize + "&facultyId=" + this.otherInfo.facultyId +
                    "&classId=" + this.otherInfo.classId;
                console.log(param);
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", param)
                    .then(response => {
                        console.log(response.data);
                        //将查询出的数据赋值给tableData
                        this.tableData = null;
                        this.tableData = response.data.allStudent;
                        console.log(this.tableData);
                        //总条数
                        this.pagination.total = response.data.count;

                    });
            },
            //重置密码
            resetPass(row){
                let param = "action=resetPass&stuNumber=" + row.user.userNumber;

                axios.post("/EpidemicControlSystem_war_exploded/UserServlet" , param).then(res =>{
                    if (res.data == true) {
                        alert(row.name + '重置密码成功');
                    }
                })
            },
            //删除账户
            deleteStu(row) {
                let param = "action=deleteUser&stuNumber=" + row.user.userNumber;

                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", param).then( res => {
                    if (res.data == true) {
                        alert(row.name + '删除成功');
                    }
                })
                //调用分页查询功能
                this.selectByPage();

            }
        },

        /*
            created表示Vue已经创建完毕
            data准备好了，视图还没有
                这个生命周期一般适合于去服务器请求数据，设置到data中，让视图去引用
        */
        created() {
            axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet",
                "action=showFaculty")
                .then(res => {
                    this.faculty = res.data;
                    console.log(this.faculty)
                });
            //调用分页查询功能
            this.selectByPage();
        }
    });
</script>
</html>